import React from 'react';
import { observer } from 'mobx-react';
import { Input, Button, Select } from 'antd';
import { SearchForm, AuthDiv, AuthCard } from 'components';
import CourseTable from './Table';
import store from './store';

export default observer(function() {
  return (
    <AuthCard auth="course.course.view">
      <SearchForm>
        <SearchForm.Item span={8} title="课程名称">
          <Input onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
        </SearchForm.Item>
        <SearchForm.Item span={8} title="课程年份">
          <Input onChange={e => store.f_year = e.target.value} placeholder="请输入"/>
        </SearchForm.Item>
        <SearchForm.Item span={8} title="课程状态">
          <Select allowClear onChange={v => store.f_status = v} placeholder="请选择">
            <Select.Option value="pending">未开始</Select.Option>
            <Select.Option value="in_progress">进行中</Select.Option>
            <Select.Option value="finished">已结束</Select.Option>
          </Select>
        </SearchForm.Item>
        <SearchForm.Item span={8}>
          <Button type="primary" icon="sync" onClick={store.fetchRecords}>刷新</Button>
        </SearchForm.Item>
      </SearchForm>
      <AuthDiv auth="course.course.add" style={{marginBottom: 16}}>
        <Button type="primary" icon="plus" onClick={() => store.showForm()}>新建</Button>
        <Button 
          type="primary" 
          icon="qrcode"
          style={{marginLeft: 8}}
          disabled={!store.selectedRows.length || store.selectedRows.length > 3}
          onClick={() => store.showQrcodeForm()}>
          生成报名二维码
        </Button>
      </AuthDiv>
      <CourseTable/>
    </AuthCard>
  )
})